<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.container {
			padding: 0 50px;
			display: flex;
			gap: 100px;
		}

		@keyframes change {
			form {
				height: 0;
			}

			to {
				height: calc-size(auto, size);
			}
		}

		.box {
			height: 0;
			overflow: hidden;
			animation: change .3s linear forwards;
		}

		p {
			height: 0;
			transition: height .3s;
			overflow: hidden;

		}

		.active+p {
			/* 单值设置 */
			height: calc-size(auto, size);
			/* calc-size(fit-content, size); */

			/* 执行计算 */
			/* 
			 calc-size(min-content, size + 100px);
			 calc-size(max-content, size - 80em);
			 calc-size(fit-content, size / 2);
			*/

			/* 函数计算 */
			/* calc-size(auto, round(up, size, 50px)); */

		}

		.figure {
			margin: 0;
			width: 300px;
			height: 280px;
			transition: width .3s;
			background-color: deepskyblue;
			/* 插值尺寸支持关键字 */
			interpolate-size: allow-keywords;
		}

		.active1+.figure {
			width: fit-content;
			height: 280px;
		}
	</style>
</head>

<body>
	<div class="container">
		<h1>方式1：calc-size</h1>
		<div class="box1">
			<div class="box">
				<img src="../image/2.jpg" width="256" alt="">
			</div>
			<div>
				<button onClick="this.classList.toggle('active')">点击</button>
				<p>
					<img src="../image/1.jpg" width="256" alt="">
				</p>
			</div>
		</div>
	</div>
	<div class="container">
		<h1>方式2：interpolate-size</h1>
		<div>
			<button onClick="this.classList.toggle('active1')">点击</button>
			<p class="figure">
				<img src="../image/1.jpg" width="100%" height="100%" alt="">
			</p>
		</div>
	</div>

</body>

</html>